<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
           请选择省份
           <select v-model="cityid">
               <option value="">请选择省份</option>
               <!-- <option value="1">湖北</option>
               <option value="2">河南</option> -->
               <option v-for="item in list" :value="item.id">
                   {{item.name}}
               </option>
           </select>

           <select>
               <option>请选择城市</option>
           </select>
           <select>
            <option>请选择区县</option>
        </select>
    </div>
    
</body>
<script>
    new  Vue({
        el:"#app",
        data:{
            cityid:"",
            list:[{id:1,name:"湖北",list:[{id:11,name:"武汉",list:[{id:111,name:"江夏"},{id:112,name:"洪山"}]},{id:12,name:"荆州",list:[{id:121,name:"沙市"},{id:122,name:"松滋"}]}]},{id:2,name:"河南",list:[{id:21,name:"郑州"},{id:22,name:"洛阳"}]},{id:3,name:"湖南",list:[{id:31,name:"长沙"},{id:32,name:"岳阳"}]}] 
        },
        watch:{
            cityid(id){
                alert("选择的编号为"+id);

            }
        }
    })


</script>
</html>